<template lang="pug">
.view.cp-train-library.fix-flex-pos
  el-tabs.tl-tabs(v-model="activeName")
    el-tab-pane(v-for="(pane, index) in paneList", :label="pane.label", :name="pane.name", :key="index")
  .tl-main.fix-flex-pos
    keep-alive
      component(:is="comObj[activeName]")
</template>

<script>
import MedicalInfo from './medicalinfo';
import StandardRule from './standardrule';
import Adverse from './adverse';

export default {
  name: 'tralibrary',
  data() {
    return {
      activeName: 'medicalinfo',
      paneList: [
        { label: '医械信息', name: 'medicalinfo', component: MedicalInfo },
        { label: '标准法规', name: 'starule', component: StandardRule },
        { label: '不良事件', name: 'adverse', component: Adverse }
      ],
      comObj: {
        medicalinfo: MedicalInfo,
        starule: StandardRule,
        adverse: Adverse
      }
    };
  },
  methods: {
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$TABHEIGHT: 42px
.cp-train-library
  overflow-x: hidden
  overflow-y: auto
  background: $THEMECOLOR
  .tl-tabs
    position: relative
    height: $TABHEIGHT
    border-top: 2px solid #eee
    .el-tabs__header
      padding-left: 20px
      background-color: #fff
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: #fff
  .tl-main
    top: $TABHEIGHT
</style>
